import React, {Component} from 'react'
import {View, Text, StyleSheet} from 'react-native'
// import {color} from '../../widget'
// import {screen, system} from '../../common'
import GameMenuItem from '../views/GameMenuItem';


type Props = {
    menuInfos: Array<Object>,
    pageSize: number,
    onMenuSelected: Function,
}


class GameMenuView extends Component<Props> {

    constructor(props: Object) {
        super(props)
    }

    render() {
        let {menuInfos, pageSize, onMenuSelected} = this.props
        let menuItems = menuInfos.slice(0,pageSize)
        // let menuItems = menuInfos;
        console.log('数据更新'+ menuItems+ JSON.stringify(menuItems));

        return (
            <View style={styles.container}>
                {menuItems.map((info) => (
                    <GameMenuItem
                        key={info.id}
                        icon={info.icon}
                        title={info.title}
                        text={info.text}
                        onPress={() => this.props.onMenuSelected(info.id)}
                    />
                ))}
            </View>
        )
    }
}


const styles = StyleSheet.create({
    container: {
        flexDirection: 'row',
        flexWrap: 'wrap',
        justifyContent: 'space-around',
        borderTopWidth: 4,
        borderLeftWidth:5,
        borderColor: 'red',
    },
})


export default GameMenuView